import {
  TextInput,
  Group,
  Button,
  Stack,
  LoadingOverlay,
  Loader,
  Modal,
  Divider,
  Radio,
  Paper,
  NumberInput,
  MultiSelect,
} from "@mantine/core";
import {DatePicker, DatePickerInput} from "@mantine/dates";

import {useDisclosure} from "@mantine/hooks";

import {IconSelector, IconWorldPlus, IconCalendar} from "@tabler/icons-react";
import {useForm, matches, hasLength} from "@mantine/form";
import {openModal} from "@mantine/modals";

const CreateNetworkType = () => {
  const form = useForm({
    initialValues: {
      name: "",
      encode: "",
      abbr: "",
      onlineTime: "",
      // offlineTime: "",
    },
    validate: {
      name: hasLength({min: 2, max: 8}, "字符长度在2-8范围内"),
      encode: matches(/^[1-9]$/, "仅限1-9的数字"),
      abbr: matches(/^[A-Z]$/, "仅限1个大写字母"),
      onlineTime: matches(/^\d{4}-\d{2}-\d{2}$/, "YYYY-MM-DD格式"),
      // offlineTime: matches(/^\d{4}-\d{2}-\d{2}$/, "YYYY-MM-DD格式"),
    },
    validateInputOnChange: true,
  });

  const [visible, handlers] = useDisclosure(false);

  return (
    <form
      onSubmit={form.onSubmit((values) => {
        // 控制台打印表单内容
        console.log(values, visible);

        // 此时应该发送POST请求
        handlers.open();
        console.log(visible);
        setTimeout(() => {
          handlers.close();
        }, 1000);
      })}
    >
      {/* Stack部分为修改内容 */}
      <Stack>
        <Divider variant="dashed" labelPosition="left" label="核心索引" />
        <MultiSelect
          label="节点:"
          placeholder="请选择2个节点"
          rightSection={<IconSelector size={16} />}
          searchable
          maxValues={2}
        />
        <Group grow>
          <TextInput label="A端节点:" placeholder="系统自动计算A端节点" disabled={true} />
          <TextInput label="Z端节点:" placeholder="系统自动计算Z端节点" disabled={true} />
        </Group>
        <Group grow>
          <TextInput
            disabled={true}
            // withAsterisk
            label="局向名称："
            placeholder="系统自动计算局向ID"
          />
          <TextInput
            disabled={true}
            // withAsterisk
            label="局向名称："
            placeholder="系统自动计算局向名称"
          />
        </Group>

        <Divider variant="dashed" labelPosition="left" label="生命周期" pt="sm" />
        <Radio.Group name="edgeStatus" label="局向状态">
          <Group mt="xs">
            <Radio value="开通" label="开通" />
            <Radio value="撤销" label="撤销" color="red" />
          </Group>
        </Radio.Group>
        <Group grow>
          <TextInput
            rightSection={<IconWorldPlus size={16} />}
            // withAsterisk
            label="开通工程名："
            placeholder="请输入开通工程名"
          />
          <DatePickerInput
            rightSection={<IconCalendar size={16} />}
            // withAsterisk
            label="开通时间："
            valueFormat="YYYY-MM-DD "
            placeholder="请输开通时间"
          />
        </Group>
        <Group grow>
          <TextInput
            rightSection={<IconWorldPlus size={16} />}
            // withAsterisk
            label="下撤工程名:"
            placeholder="请输入下撤工程名"
          />
          <DatePickerInput
            rightSection={<IconCalendar size={16} />}
            // withAsterisk
            label="下撤时间:"
            valueFormat="YYYY-MM-DD "
            placeholder="请输入下撤时间"
          />
        </Group>

        <Divider variant="dashed" labelPosition="left" label="逻辑网络" pt="sm" />

        <Group grow>
          <NumberInput
            // withAsterisk
            label="IGP路由开销:"
            placeholder="请输入IGP路由开销"
          />
          <TextInput
            // withAsterisk
            label="局向总带宽(G):"
            placeholder="系统自动计算局向总带宽"
            disabled={true}
          />
        </Group>
        <Divider variant="dashed" labelPosition="left" label="局向内链路构成" pt="sm" />

        <Group grow>
          <NumberInput label="400G数量:" placeholder="非负整数" />
          <NumberInput label="100G数量:" placeholder="非负整数" />
          <NumberInput label="10G数量:" placeholder="非负整数" />
          <NumberInput label="1G数量:" placeholder="非负整数" />
        </Group>

        <Group justify="flex-end" pt="lg">
          <Button variant="default" size="sm">
            取消
          </Button>
          <Button variant="filled" size="sm" type="submit">
            确认
          </Button>
        </Group>
      </Stack>
    </form>
  );
};

export const modalCreateNetworkType = () => {
  openModal({
    title: "新增局向",
    children: <CreateNetworkType />,
    size: "xl",
  });
};
